<template>
    <div>王志超真帅
        <!-- <div class="red">
            <span>大家好我叫王志超</span>
            <div class="blue">
                我有一个女朋友
                <div class="green">金老师喜欢绿色</div>
            </div>
        </div>
        <div class="blue">
                我有100个女朋友
        </div>
        <div class="box">王总v578</div>
        <div id="box1"></div>
        <div id="box2"></div> -->
        <barcode :value="barValue"></barcode>
        {{pass}}
        <!--  -->
    </div>
</template>
<script>
export default {
    name:"dashboard",
    data(){
        return{
            barValue:"12312313"
        }
    }
}
</script>
<style lang="less">
    .red{
        color: red;
        .blue{
            color: blue;
            .green{
                color: green;
            }
        }
    }
    // var let const
    // @
    // less变量
    // layout布局 @media 
    // 1)必须是@开头
    // 2）如果声明的变量不是css的属性值而是选择器或者属性名就是@{}
    @borderClass:.box;
    @tenpx :10px;
    @soildborder:solid;
    @borderName:border;
    @bordercolor:red;
    @{borderClass}{
        @{borderName}:@tenpx @soildborder @bordercolor;
    }
    // less混合 函数写法
    .hezi(@w:100px;@h:60px;@c:blue){
        width: @w;
        height: @h;
        background: @c;
    }
    #box1{
        .hezi()
    }
    #box2{
        .hezi(@w:200px;@h:10px;@c:red)
    }
    // width:calc(100% - 40px);
    // width：~"calc(100% - 40px)";//less里面出现运算符就要防止webpack的反编译

    
</style>